 <template>
	<div class="pc-container">
		<ShopHeader :isInput="dataArr.isInput" 
			:iconArr="dataArr.iconArr" 
			:placeholder="dataArr.placeholder"
			:aimUrl="dataArr.aimUrl"
			:rightUrl="dataArr.rightUrl"
		/>
		<div class="top-zhanwei"></div>
		<div class="pc-content">
			<div class="personMsg">
				<p class="pBottom">
					<span>头像</span>
					<img src="../../assets/images/mine/img_touxiang@2x.png" alt="">
					<i class="iconfont icon-iconfontyoujiantou"></i>
				</p>
				<p @click='goToChangeName'>
					<span>昵称</span>
					<span class="iconname">{{ username }}</span>
					<i class="iconfont icon-iconfontyoujiantou"></i>
				</p>
			</div>
			<div class="personMsg">
				<p class="pBottom">
					<span>证件信息</span>
					<i class="iconfont icon-iconfontyoujiantou"></i>
				</p>
				<p class="pBottom">
					<span>资质信息</span>
					<i class="iconfont icon-iconfontyoujiantou"></i>
				</p>
				<p>
					<span>学历信息</span>
					<i class="iconfont icon-iconfontyoujiantou"></i>
				</p>
			</div>
			<div class="personMsg">
				<p>
					<span>账号信息管理</span>
					<i class="iconfont icon-iconfontyoujiantou"></i>
				</p>
			</div>
			<div class="personMsg">
				<p>
					<span>关于我们</span>
					<i class="iconfont icon-iconfontyoujiantou"></i>
				</p>
			</div>
			<div class="sublet-btn" @click='logOut'>退出登录</div>
		</div>
		{{getcookie}}
	</div>
</template>
<script>
	import ShopHeader from "../../components/shopheader"
	import  "../../assets/iconfont/iconfont.css"
	export default{
		name:'personcenter',
		data(){
			return{
				username:this.$cookie.get("test") != null ? (JSON.parse(this.$cookie.get("test")).username) : '蓝莓蓝',
				personArr:[
					{
						iconImg:require("../../assets/images/mine/img_touxiang@2x.png"),
						nickname:"浅浅"
					}
				],
				dataArr:{
					isInput:false,
					iconArr:[
						{
							iconLeft:"icon-zuojiantou",
							iconRight:""
						}
					],
					placeholder:"个人设置",
					aimUrl:"/layout/mine",
					rightUrl:''
				}
			}
		},
		components:{
			ShopHeader
		},
		methods:{
			goToChangeName(){
				this.$router.push('/mine/changename')

			},
			logOut(){
				this.$cookie.delete('test')
				this.$router.push('/layout/mine');
			}
		},
		computed:{
			getcookie(){
				return	console.log(this.$cookie.get("test"))
			}
			
		}
	}
</script>
<style scoped lang="less">
	.pc-container{
		width: 100%;
		background-color: #e6e6e6;
		height: 667 / 50rem;
		overflow: hidden;
		.top-zhanwei{
			width: 100%;
			height: 88 / 2 / 50rem;
		}
		.comment(){
			color: #333;
			font-size: 15 / 50rem;
			font-weight: 700;
		}
		.pc-content{
			width: 95%;
			margin: 20 / 2 / 50rem auto;
			.personMsg{
				width: 100%;
				border-radius:10 / 2 / 50rem;
				overflow: hidden;
				margin: 20 / 2 / 50rem auto;
				p{
					width: 100%;
					height: 60 / 50rem;
					line-height: 60 / 50rem;
					background-color: #fff;
					padding-left:20 / 2 / 50rem;
					padding-right:20 / 2 / 50rem;
					box-sizing: border-box;
					.comment();
					position: relative;
					img{
						width: 48 / 50rem;
						height: 48 / 50rem;
						vertical-align: middle;
						position: absolute;
						right: 25 / 50rem;
						top: 6 / 50rem;
					}
					i{
						color: rgba(0,0,0,.6);
						font-size: 20 / 50rem;
						position: absolute;
						right: 0;
					}
					.iconname{
						position: absolute;
						right: 30 / 50rem;
					}
				}
				.pBottom{
					border-bottom: 2 / 50rem solid rgba(0,0,0,.1);
				}
			}
			.sublet-btn{
				width: 100%;
				height: 44 / 50rem;
				background-color: #f55;
				color: #fff;
				font-size: 18 / 50rem;
				font-weight: 700;
				line-height: 44 / 50rem;
				text-align: center;
				margin: 20 / 50rem auto;
				border-radius: 5 / 50rem;
			}
		}
	}
</style>